<script setup lang='ts'>
  import ruleBack from './components/ruleBack.vue';
</script>

<template>
  <div class="content">
    <ruleBack>
      <template #titleImg>
        <img src="@/assets/images/titleimg4.png">
      </template>
      <ul class="ruleText">
        <li>每送出一个盲盒礼物，可获得消耗钻石数的同价值碎片(系统自动下发碎片，可在活动页查看碎片余额)<br>1钻石=1碎片，碎片可在兑换商城中兑换高价值商品，兑换类型包含：头像框、进场特效、气泡等，兑换商城不定时更新，请及时关注。</li>
        <br />
        <li>每个盲盒礼物内含平台6-8款不同动画、不同钻石价值的虚拟礼物，每送出一个盲盒礼物，附赠爆出1个虚拟礼物，虚拟礼物直接送出，不进入背包。</li>
        <br />
        <li>财富值增加规则：根据送出盲盒礼物消耗的钻石数增加财富值。</li>
        <br />
        <li>魅力值增加规则：根据盲盒礼物爆出的礼物钻石价值增加魅力值。</li>
        <br />
        <li>盲盒礼物仅限于平台内互动娱乐使用，不得以任何形式兑换成法定货币、现金、或其他任何具有交换价值的物品或服务，任何违规行为一经发现，平台将严格按规定对违规账号进行封禁处理。</li>
        <br />
        <li>对于任何违规手段或影响公共性的行为，经查证属实，官方有权终止向违规账号提供服务，回收账号并清空账号中的非法虚拟产品；情节严重者平台有权追究相关法律责任。</li>
        <br />
        <li>盲盒礼物与苹果公司无关，最终解释权归本派对所有。</li>
      </ul>
    </ruleBack>
  </div>
</template>

<style lang='scss' scoped>
  .content {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 10px 30px;
    box-sizing: border-box;
    min-height: 100vh;
    background: #b77bf4;
    .my-10 {
      margin: 10px 0;
    }
    .mb-10 {
      margin-bottom: 10px;
    }
    .ruleBack {
      margin-bottom: 20px;
    }
    .titleText {
      width: 305px;
      height: 24px;
      line-height: 24px;
      color: #B74621;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      margin: 16px auto 0;
      background: #FFEED5;
      border-radius: 4px;
    }
    .ruleText {
      margin-top: 10px;
      li {
        color: #FFEED5;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
      }
    }
    .tableBox {
      margin-top: 20px;
      overflow: hidden;
      width: 100%;
      border-radius: 12px;
      border: 1px solid #945738;
      margin: 15px 0 0;

      li {
        flex: 1;
        color: #FFEED5;
        font-weight: 400;
        text-align: center;
      }
      li:nth-child(1) {
        flex: none;
        width: 80px !important;
      }
      .titleTable {
        ul {
          li {
            font-size: 14px;
          }
        }
      }
      .listTable {
        height: max-content;
        min-height: 36px;

        li {
          min-height: 36px;
          font-size: 12px;
          border-bottom: 1px solid #945738;
          border-right: 1px solid #945738;
          padding: 0 4px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        li:nth-last-child(1) {
          border-right:none;
        }
      }
      .listTable:nth-last-child(1) {
        li{
          border-bottom: none;
        }
      }
    }
    .richList {
      li:nth-child(3) {
        min-width: 100px !important;
      }
    }
    .taskList {
      li:nth-child(1) {
        width: 120px !important;
      }
    }
  }
</style>